import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import 'dayjs/locale/zh-cn'
import dayjs from 'dayjs'
import JSONbig from 'json-bigint'
// 相对时间插件引入
import relativeTime from 'dayjs/plugin/relativeTime'
// 引入Vant组件库
import Vant from 'vant'
// Vant组件库的样式
import 'vant/lib/index.css'
// 全局样式文件
import './assets/styles/index.css'

// 设置rem基准值
import 'amfe-flexible'

dayjs.extend(relativeTime)
dayjs.locale('zh-cn') // 全局使用中文

// 配置一个全局过滤器
Vue.filter('relativeTime', value => {
  return dayjs(value).from(dayjs())
})
Vue.filter('dateTime', value => {
  return dayjs(value).format('YYYY-MM-DD HH:mm')
})

// 设置axios
axios.defaults.baseURL = 'http://ttapi.research.itcast.cn'
// id过大转换后js无法识别
axios.defaults.transformResponse = [function (data) {
  try {
    return JSONbig.parse(data)
  } catch (err) {
    console.log('转换失败', err)
    return data
  }
}]
// 设置请求拦截器，统一给所有请求设置携带请求头信息，携带token
// Add a request interceptor
axios.interceptors.request.use(function (config) {
  // 用户已经登录了才会将这个携带，否则不携带
  const { user } = store.state
  if (user) { config.headers.Authorization = `Bearer ${user.token}` }
  // 每次必须返回config
  return config
}, function (error) {
  return Promise.reject(error)
})
Vue.prototype.$https = axios

Vue.use(Vant)
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App),
  beforeCreate () {
    Vue.prototype.$bus = this
    // 创建全局事件总线 $bus 是迎合vue
    // 这样，子组件的vc实例都可以访问到这个$bus，且，上面也有$emit,$on,$off等自定义事件的方法
  }
}).$mount('#app')
